<template>
  <el-card>
    <div slot="header">
      <span>供应商人员信息</span>
    </div>
    <skus-table
      :showSelectCol="false"
      :showPagination="false"
      :columns="tableColumn"
      :dataSource="supplierDTOList"
      :tableHeight="400"
      @handleCancelSelect="handleCancelSelect"
      @handleSelectChange="handleSelectChange"
    >
      <div v-if="!isView" slot="content_context" style="margin-bottom: 5px">
        <el-button size="mini" type="primary" @click="handleAddRow"
          >添加行</el-button
        >
      </div>
    </skus-table>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import { GENDER_SELECT_LIST, JOB_TITLE_SELECT_LIST } from '@/pages/supplier/constants/common'
import { getAddressList } from '@/api/supplier/components'
import { list2Obj } from '@/pages/supplier/utils';

export default {
  components: {
    SkusTable
  },
  props: {
    supplierUserList: { // 供应商人员信息
      type: Array,
      default: () => {
        return []
      }
    },
    isView: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      GENDER_SELECT_LIST,
      JOB_TITLE_SELECT_LIST,
      key: 1,
      tableColumn: [],
      supplierDTOList: [],
      addressOptions: [],
      directSuperiorOption: [],
    };
  },
  computed: {
    title () {
      return this.id ? '修改运费' : '新建运费';
    },
  },
  watch: {
    supplierUserList: {
      handler (newVal) {
        this.supplierDTOList = newVal
      },
      immediate: true,
      deep: true
    },
    supplierDTOList: {
      handler (val) {
        val.map(item => {
          if (item.personName && !this.directSuperiorOption.map(item => item.label).includes(item.personName)) {
            this.directSuperiorOption.push({
              label: item.personName,
              value: item.personName
            })
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.queryAddressList()
  },
  methods: {
    // 初始化表列
    initTableCloumn () {
      if (this.isView) {
        this.tableColumn = [
          { key: 'personName', title: '姓名' },
          {
            key: 'personSex',
            title: '性别',
            formatter: (row, columns, cellValue) => {
              return list2Obj(GENDER_SELECT_LIST)[cellValue];
            }
          },
          { key: 'idCard', title: '身份证号' },
          {
            key: 'personPost',
            title: '职务',
          },
          {
            key: 'personRole',
            title: '角色',
            formatter: (row, columns, cellValue) => {
              return list2Obj(JOB_TITLE_SELECT_LIST)[cellValue];
            }
          },
          { key: 'directSuperior', title: '直属上级' },
          {
            key: 'managementScope',
            title: '管理范围',
          },
          {
            key: 'serviceArea',
            title: '服务区域',
            formatter: (row, columns, cellValue) => {
              return list2Obj(this.addressOptions)[cellValue];
            }
          },
          { key: 'contactPhone', title: '联系电话' },
          { key: 'wxQq', title: '微信/QQ' },
          { key: 'email', title: 'E-mail' },
        ];
      } else {
        this.tableColumn = [
          { key: 'personName', title: '姓名', type: 'input', width: 100, required: true },
          { key: 'personSex', title: '性别', type: 'select', width: 100, options: GENDER_SELECT_LIST, required: true },
          { key: 'idCard', title: '身份证号', type: 'input', width: 150 },
          { key: 'personPost', title: '职务', width: 150, type: 'inputNoLimit', maxlength: 100, required: true },
          { key: 'personRole', title: '角色', width: 150, type: 'selectChange', options: JOB_TITLE_SELECT_LIST, required: true },
          { key: 'contactPhone', title: '联系电话', width: 180, type: 'inputNoLimit', maxlength: 100, required: true },
          { key: 'directSuperior', title: '直属上级', width: 150, type: 'select', options: this.directSuperiorOption },
          { key: 'managementScope', title: '管理范围', width: 160, type: 'inputNoLimit' },
          { key: 'serviceArea', title: '服务区域', width: 160, type: 'select', options: this.addressOptions },
          { key: 'wxQq', title: '微信/QQ', width: 180, type: 'inputNoLimit', maxlength: 100 },
          { key: 'email', title: 'E-mail', width: 180, type: 'inputNoLimit', maxlength: 100 },
          { key: 'action', title: '操作', fixd: 'right' },
        ];
      }
    },
    queryAddressList () {
      getAddressList({}).then(({ result = [] }) => {
        this.addressOptions = result.map(item => ({
          value: item.addressId,
          label: item.addressName,
        }))
        this.initTableCloumn()
      })
    },
    /* 删除按钮事件 */
    handleCancelSelect ({ row, index }) {
      if (row.personPost == 2) {
        return this.$message.warning('禁止删除主要业务联系人')
      }
      this.supplierDTOList.splice(index, 1);
      this.handleSelectChange()
    },
    // 供应商人员信息，职务增加逻辑【主要业务联系人】仅可存一个
    handleSelectChange () {
      this.JOB_TITLE_SELECT_LIST[1].disabled = this.supplierDTOList.some(i => i.personRole === 2)
    },
    // 添加行
    handleAddRow () {
      this.handleSelectChange()
      this.supplierDTOList.push({
        key: this.key++,
        personName: '',
        personSex: '',
        idCard: '',
        personPost: '',
        personRole: '',
        directSuperior: '',
        managementScope: '',
        serviceArea: '',
        contactPhone: '',
        wxQq: '',
        email: '',
      })
    }
  },
};
</script>
<style scoped>
.page-footer {
  margin-top: 10px;
}
</style>
